<template>
  <div>
    <van-tabbar v-model="active" active-color="#ff5f16">
      <van-tabbar-item icon="video-o">电影</van-tabbar-item>
      <van-tabbar-item>
        <span>影院</span>
        <template #icon="props">
          <svg class="svg-icon" :class="{ active: props.active }">
            <use href="#icon-yingyuan" />
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>资讯</span>
        <template #icon="props">
          <svg class="svg-icon" :class="{ active: props.active }">
            <use href="#icon-yonghuziliaogerenxinxigerenziliao-xianxing" />
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="user-circle-o">个人</van-tabbar-item>
    </van-tabbar>
    <hr />
    <xw-icon />
  </div>
</template>

<script>
// 引入字体库
import '@/utils/iconfont'
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 22px;
  height: 22px;
  fill: #646566;
  &.active {
    fill: #ff5f16;
  }
}
</style>
